<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ceshi滑块</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
</head>
<body>
<br/><br/><br/><br/><br/><br/>
<div id="slideTest1"></div>
<br/><br/>
<button onclick="动态给滑块赋值()" type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">动态给滑块赋值</button>

<script src="../zujian/layui/layui.all.js"></script>

<script>

    let slider =null;
    let ins001=null;

    function 动态给滑块赋值(){
        alert(JSON.stringify(ins001.config)) ;//获得当前实例的配置项
        ins001.setValue(34); //动态给滑块赋值

        //若滑块开启了范围（range: true）
        // ins001.setValue(20, 0) //设置开始值
        // ins001.setValue(60, 1) //设置结尾值
    }


    layui.use('slider', function(){
        slider = layui.slider;

        //渲染
        ins001=slider.render({
            elem: '#slideTest1'  //绑定元素
            //,type:'default'// 水平滑块
            ,type:'vertical'//垂直滑块
            ,min:2//滑条最小值
            ,max:97//滑条最大值
            // 是否开启滑块的范围拖拽，若设为 true，则滑块将出现两个可拖拽的环
            //就是开启范围拖拽, 拖拽后再拖拽就拖拽一个范围
            ,range:false
            //滑块初始值，默认为数字，若开启了滑块为范围拖拽（即 range: true）
            // ，则需赋值数组，异表示开始和结尾的区间，如：value: [30, 60]
            //,value: 33
            ,value:[23,34]
            //拖动步长,貌似必须是整数
            ,step:2
            ,showstep:true// 是否显示间断点//拖动的时候会显示虚线间断点
            ,tips:true//是否显示文字提示//默认true,显示的是拖动到45 46这些
            //是否显示输入框（注意：若 range 参数为 true 则强制无效）
            //点击输入框的上下按钮，以及输入任意数字后回车或失去焦点，均可动态改变滑块
            //输入框输完回车直接到该数值
            ,input:true//是否显示输入框
            // 滑动条高度，需配合 type:"vertical" 参数使用
            ,height: 200
            ,disabled:false//是否将滑块禁用,默认false
            // 主题颜色，以便用在不同的主题风格下
            ,theme:'#481996'
            //自定义提示文本
            ,setTips: function(value){ //自定义提示文本
                //比如加上百分号
                return value + '%';
            }
            //数值改变的回调
            ,change: function(value){
                console.log("数值改变的回调001")
                console.log(value) //动态获取滑块数值
                console.log("数值改变的回调002")
                //do something

                //当滑块是范围的时候返回的是数组
                // console.log(value[0]) //得到开始值
                // console.log(value[1]) //得到结尾值
            }
        });


    });
</script>
</body>
</html>